<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<!-- 个人信息卡片 -->
		<userinfo-card v-if="userHeadData && userHeadData.style" :scrollTop="scrollTop" :detail="userHeadData" @onShare="onShare"></userinfo-card>
<!--		我的知识-->
		<view class="u-flex u-row-between u-col-center u-p-20">
			<view class="my-item my-item4 u-flex u-col-top u-p-10 u-p-t-20" @click="jump('/pages-user/user-group/my-project')">我的项目</view>
			<view class="my-item my-item2 u-flex u-col-top u-p-10 u-p-t-20" @click="jump('/pages-user/user-group/my-quanyi',{utype:1})">代理权益</view>
			<view class="my-item my-item1 u-flex u-p-10 u-p-t-20 u-col-top"  @click="jump('/pages-user/user-group/my-quanyi',{utype:2})">区域权益</view>
			</view>
		<view class="u-flex u-row-between u-col-center u-p-20">
			<view class="my-item my-item5 u-flex u-p-10 u-p-t-20 u-col-top"  @click="jump('/pages/app/commission/index')">我的团队</view>
			<view class="my-item my-item6 u-flex u-p-10 u-p-t-20 u-col-top" @click="jump('/pages-user/user-group/my-quanyi',{utype:3})">经纪权益</view>
			<view class="my-item my-item3 u-flex u-p-10 u-p-t-20 u-col-top" @click="jump('/pages/index/cart')">我的商城</view>
		</view>
		<!-- 自定义模块 -->
		<view v-for="(item, index) in userTemplate" :key="item.id">
			<!-- 轮播 -->
			<sh-banner
				v-if="item.type === 'banner' && index !== 0"
				:Px="item.content.x"
				:Py="item.content.y"
				:borderRadius="item.content.radius"
				:height="item.content.height"
				:list="item.content.list"
			></sh-banner>
			<!-- 滑动宫格 -->
			<sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list" :oneRowNum="item.content.style"></sh-grid-swiper>
			<!-- 广告魔方 -->
			<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
			<!-- 推荐商品 -->
			<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods>
			<!-- 富文本 -->
			<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
			<!-- 功能列表 -->
<!--			<sh-cell v-if="item.type === 'nav-list'" :list="item.content.list"></sh-cell>-->
			<!-- 九宫格列表 -->
<!--			<sh-grid v-if="item.type === 'grid-list'" :list="item.content.list"></sh-grid>-->
			<!-- 钱包 -->
<!--			<sh-wallet v-if="item.type === 'wallet-card'"></sh-wallet>-->
			<!-- 订单卡片 -->
			<sh-order-card v-if="item.type === 'order-card'"></sh-order-card>
		</view>
		<sh-grid-copy  :list="gridList" @openKefu="openKefuPopou"></sh-grid-copy>
		<!-- #ifdef H5 -->
		<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
		<!-- #endif -->
		<!-- 关注弹窗 -->
<!--		<shopro-float-btn></shopro-float-btn>-->
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
		<!-- 分享组件 -->
		<shopro-share-poster v-model="showShare" posterType="user" ref="posters"></shopro-share-poster>
		<!-- <shopro-tabbar></shopro-tabbar> -->
<!--		https://file.shopro.top/uploads/20210518/ccb0390403a473d6b019d330bbf6bca4.png-->
		<!-- 领取优惠券弹出层 -->
<!--		<u-popup ref="popupKefu" mode="center">-->
<!--			<view class="coupons-index-box u-flex u-flex-col u-row-center u-col-center u-p-t-30 u-p-b-30"-->
<!--			      :style="{'background':'url(https://d-chanxiangjc.bigchun.com/static/images/user/kefubg.png) no-repeat center',-->
<!--		'background-size': '100%'}">-->
<!--				<view class="dianhua">客服电话</view>-->
<!--				<view class="tel-content u-flex u-flex-col u-row-center u-col-center">-->
<!--					<view class="tel-item" v-for="(item,index) in kefuData">{{ item.mobile }}</view>-->
<!--				</view>-->
<!--				<view class="img4 u-m-t-40 u-m-b-20" @click="closeGetKefu()">-->
<!--					好的-->
<!--				</view>-->
<!--			</view>-->
<!--		</u-popup>-->
		<u-popup ref="popupKefu" mode="center">
			<view class="u-popup u-flex u-flex-col u-row-around u-col-center"
			      :style="{'background':'#fff'}">
				<view class="dianhua u-m-t-30 u-m-b-30">客服电话</view>
				<view class="tel-content u-flex u-flex-col u-row-between u-col-center" style="width: 90%;">
					<view class="tel-item u-flex u-row-left u-col-center" v-for="(item,index) in kefuData" style="width: 100%;">
						<image style="width: 120rpx; height: 106rpx;border-radius: 50%;margin-right: 20rpx;margin-bottom: 20rpx" :src="item.image"></image>
						<view class="u-flex u-flex-col u-row-left u-col-center"  style="width: 60%;">
							<view style="width: 100%;">{{ item.name }}</view>
							<view style="width: 100%;">{{ item.mobile }}</view>
						</view>
						<image style="width: 120rpx; height: 120rpx;" :src="item.qrimage"></image>
					</view>
				</view>
				<view class="img5 u-m-t-40 u-m-b-20" @click="closeGetKefu()">
					好的
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shAdv from './components/sh-adv.vue';
import shRichtext from './components/sh-richtext.vue';
import shCell from './components/sh-cell.vue';
import shGrid from './components/sh-grid.vue';
import shOrderCard from './components/sh-order-card.vue';
import shWallet from './components/sh-wallet.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import shGridCopy from './components/sh-grid-copy.vue';
import userinfoCard from './user/userinfo-card.vue';

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';

import share from '@/shopro/share';

export default {
	components: {
		shBanner,
		shGridSwiper,
		shAdv,
		shRichtext,
		shCell,
		shGrid,
		shWallet,
		shOrderCard,
		shHotGoods,
		shGridCopy,
		userinfoCard
	},
	data() {
		return {
			scrollTop: 0,
			showShare: false,
			enable: false, //是否开启吸顶。
			kefuData:[],
			gridList: [
				{
					"name": "我的积分",
					"image": this.$IMG_URL + "/user/gridList/jifen.png",
					"path": "/pages/user/wallet/score-balance",
					"path_name": "我的积分",
					"path_type": 1
				},
				{
					"name": "我的知识",
					"image":   this.$IMG_URL + "/user/gridList/xiangmu.png",
					"path": "/pages-user/user/myzhishi",
					"path_name": "我的知识",
					"path_type": 1
				},
				{
					"name": "我的代理",
					"image":  this.$IMG_URL + "/user/gridList/quanyi.png",
					"path": "/pages-user/user/mydaili",
					"path_name": "我的代理",
					"path_type": 1
				},
				{
					"name": "我的股权",
					"image": this.$IMG_URL + "/user/gridList/guquan.png",
					"path": "/pages-user/user-group/my-guquan",
					"path_name": "我的股权",
					"path_type": 1
				},
				{
					"name": "拟上市股票",
					"image":  this.$IMG_URL + "/user/gridList/shangshi.png",
					"path": "/pages-user/user-group/my-shangshi",
					"path_name": "拟上市股票",
					"path_type": 1
				},
				// {
				// 	"name": "我的项目",
				// 	"image":  this.$IMG_URL + "/user/gridList/xiangmu.png",
				// 	"path": "/pages-user/user-group/my-project",
				// 	"path_name": "我的项目",
				// 	"path_type": 1
				// },
				{
					"name": "地址管理",
					"image":  this.$IMG_URL + "/user/gridList/dzhi.png",
					"path": "/pages/user/address/list",
					"path_name": "地址管理",
					"path_type": 1
				},
				{
					"name": "我的收藏",
					"image": this.$IMG_URL + "/user/gridList/shoucang.png",
					"path": "/pages-user/user-factivor/user-factivor",
					"path_name": "我的收藏",
					"path_type": 1
				},
				{
					"name": "我的评价",
					"image": this.$IMG_URL + "/user/gridList/pingjia.png",
					"path": "/pages/goods/comment/comment-list",
					"path_name": "我的评价",
					"path_type": 1
				},
				{
					"name": "联系客服",
					"image": this.$IMG_URL + "/user/gridList/kefu.png",
					"path_name": "联系客服",
					"path_type": 1
				},
				{
					"name": "我的客户",
					"image":   this.$IMG_URL + "/user/gridList/tuandui.png",
					"path": "/pages-user/user-group/my-kehu",
					"path_name": "我的客户",
					"path_type": 1
				},
			]
		};
	},
	computed: {
		...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType']),
		userHeadData() {
			if (this.userTemplate?.length) {
				return this.userTemplate[0].content;
			}
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.init();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},

	onShow() {
		if (this.isLogin) {
			this.init();
			this.getUserData();
		}
		this.enable = true;
	},

	methods: {
		...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
		onShare() {
			this.showShare = true;
			// uni.hideTabBar();
			this.$refs.posters.onPoster();
		},
		// 初始化
		init() {
			this.getUserInfo()
				.then(res => {
					console.log(res,'user')
					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
			this.getKefu();
		},
		getKefu(){
			this.$new_http('newuser.kefu', {
				// category:0,
				// limit:10,
				// page:this.page
			}).then(res => {
				this.kefuData = res.data
				// if (res.code === 1) {
				// 	this.richText = res.data;
				// }
			});
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		openKefuPopou(){
			this.$refs.popupKefu.open();
		},
		closeGetKefu(){
			this.$refs.popupKefu.close();
		}
	}
};
</script>

<style lang="scss">
page{
	background: #FBFAFA;
}
.copyright-box {
	.copyright-text {
		font-size: 22rpx;
		font-weight: 500;
		color: #c4c4c4;
	}
}
.my-item{
	color:#5E2E00;
	font-size:32rpx ;
	font-weight: bold;
	height: 120rpx;
	width: 32%;
}
.my-item1{
	background: url(@/static/images/user/quyu.png) no-repeat center;
    background-size: 100%;
}
.my-item2{
	background: url(@/static/images/user/daili.png) no-repeat center;
	background-size: 100%;
}
.my-item3{
	background: url(@/static/images/user/shangcheng.png) no-repeat center;
	background-size: 100%;
}
.my-item4{
	background: url(@/static/images/user/project.png) no-repeat center;
	background-size: 100%;
}
.my-item5{
	background: url(@/static/images/user/tuandui.png) no-repeat center;
	background-size: 100%;
}
.my-item6{
	background: url(@/static/images/user/shouyi.png) no-repeat center;
	background-size: 100%;
}
.coupons-index-box{
	width:86vw;
	height:1010rpx;
	.dianhua{
		color:#fff;
		font-size: 36rpx;
		margin-bottom: 30rpx;
		margin-top: 476rpx;
	}
	.tel-content{
		width: 100%;
		color: #fff;
		font-size:36rpx ;
		line-height: 66rpx;
	}
	.img4{
		background: #fff;
		width: 80%;
		height: 80rpx;
		border-radius: 16rpx;
		color:#F26F2E ;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
}
.u-popup{
	width:86vw;
	height:520rpx;
	border-radius: 30rpx;
	.dianhua{
		font-size: 36rpx;
	}
	
	.img5{
		background: #F26F2E;
		width: 80%;
		height: 80rpx;
		border-radius: 30rpx;
		color:#fff ;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
::v-deep .u-mode-center-box {
	background: transparent!important;
}
</style>
